<template>
  <div class="infoFrom">
    <nut-form v-if="formData" ref="ruleForm" :model-value="formData" :rules="releuList()">
      <nut-form-item prop="userName">
        <nut-input v-model="formData.userName" class="nut-input-text" placeholder="请输入账号,或指定的手机号" type="text" />
      </nut-form-item>
      <nut-form-item prop="passWord">
        <nut-input v-model="formData.passWord" class="nut-input-text" placeholder="请输入密码" type="password" />
      </nut-form-item>

      <!-- <nut-cell>
        <nut-button type="primary" size="small" style="margin-right: 10px" @click="submitUp">提交</nut-button>
        <nut-button size="small" @click="reset">重置提示状态</nut-button>
      </nut-cell> -->
    </nut-form>
    <nut-button class="infoFrom-button" size="large" type="primary" @click="submitUp">登录</nut-button>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importFunction from './infoFrom';
export default {
  setup() {
    const { init, base, submitUp, releuList } = importFunction();
    init();
    return {
      init,
      ...toRefs(base),
      submitUp,
      releuList,
    };
  },
};
</script>

<style lang="less" scoped>
.infoFrom {
  width: 80%;
  margin: 60% auto 0;
  :deep(.nut-cell-group__wrap) {
    background-color: transparent;
  }
  :deep(.nut-cell) {
    background: transparent;
  }

  // :deep(.nut-cell-group .nut-cell:after) {
  //   border-bottom: 1px solid black;
  // }
  :deep(.nut-cell-group__wrap) {
    // box-shadow: none;
  }

  :deep(.nut-input .input-text) {
    font-size: 16px;
  }
  &-button {
    margin-top: 36px;
  }
}
</style>
